<template>
  <div class="container">
    <el-card>
      <div class="observe_header">
        <el-tabs
          style="width: 100%"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane label="销售量" name="first"></el-tab-pane>
          <el-tab-pane label="访问量" name="second"></el-tab-pane>
        </el-tabs>
        <div class="observe_date">
          <ul>
            <li @click="setDay">今日</li>
            <li @click="setWeek">本周</li>
            <li @click="setMonth">本月</li>
            <li @click="setYear">本年</li>
            <li>
              <el-date-picker
                v-model="dateVal"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
                class="data"
              >
              </el-date-picker>
            </li>
          </ul>
        </div>
      </div>
      <div class="observe_content">
        <el-row :gutter="10">
          <el-col :span="18">
            <div class="charts" ref="charts"></div>
          </el-col>
          <el-col :span="6">
            <h3>门店访问量排名</h3>
            <div class="ovserve_rand">
                <ul>
                    <li>
                        <span class="order">1</span>
                        <span class="name">肯德基</span>
                        <span class="count">123456</span>
                    </li>
                    <li>
                        <span class="order">2</span>
                        <span class="name">肯德基</span>
                        <span class="count">123456</span>
                    </li>
                    <li>
                        <span class="order">3</span>
                        <span class="name">肯德基</span>
                        <span class="count">123456</span>
                    </li>
                    <li>
                        <span class="order_s">4</span>
                        <span class="name">肯德基</span>
                        <span class="count">123456</span>
                    </li>
                    <li>
                        <span class="order_s">5</span>
                        <span class="name">肯德基</span>
                        <span class="count">123456</span>
                    </li>
                    <li>
                        <span class="order_s">6</span>
                        <span class="name">肯德基</span>
                        <span class="count">123456</span>
                    </li>
                    <li>
                        <span class="order_s">7</span>
                        <span class="name">肯德基</span>
                        <span class="count">123456</span>
                    </li>
                </ul>
            </div>
        </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import dayjs from "dayjs";
import echarts from "echarts";
export default {
  data() {
    return {
      activeName: "first",
      dateVal: "",
      myEcharts: null,
      saleVal: [190, 390, 200, 334, 390, 330, 220, 190, 220, 200, 334, 390],
      visVal: [220, 190, 220, 200, 540, 390, 190, 390, 200, 334, 390, 330],
    };
  },
  methods: {
    setDay() {
      const day = dayjs().format("YYYY-MM-DD");
      this.dateVal = [day, day];
    },
    setWeek() {
      const start = dayjs().day(1).format("YYYY-MM-DD");
      const end = dayjs().day(7).format("YYYY-MM-DD");
      this.dateVal = [start, end];
    },
    setMonth() {
      const start = dayjs().startOf("month").format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      this.dateVal = [start, end];
    },
    setYear() {
      const start = dayjs().startOf("year").format("YYYY-MM-DD");
      const end = dayjs().endOf("year").format("YYYY-MM-DD");
      this.dateVal = [start, end];
    },
    handleClick() {},
  },
  computed: {
    title() {
      return this.activeName === "first" ? "销售额" : "访问量";
    },
  },
  watch: {
    title() {
      this.myEcharts.setOption({
        title: {
          text: this.title + "趋势",
        },
        series: [
          {
            data: this.activeName === "first" ? this.saleVal : this.visVal,
          },
        ],
      });
    },
  },
  mounted() {
    this.myEcharts = echarts.init(this.$refs.charts);

    this.myEcharts.setOption({
      title: {
        text: this.title + "趋势",
      },
      tooltip: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
        axisTick: {
          // alignWithLabel: true,
        },
      },
      yAxis: {
        type: "value",
      },
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: "none",
          },
          dataView: { readOnly: false },
          magicType: { type: ["line", "bar"] },
          restore: {},
          saveAsImage: {},
        },
      },
      series: [
        {
          name: "Direct",
          type: "bar",
          barWidth: "40%",
          data: this.visVal,
          color: "#5470c6",
        },
      ],
    });
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container {
  margin-top: 20px;
}
.charts {
  width: 100%;
  height: 300px;
}
.ovserve_rand {
    ul {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        li {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            height: 50px;
            line-height: 50px;
            .order {
            display: block;
            width: 20px;
            height: 20px;
            color: #fff;
            border-radius: 50%;
            background-color: yellowgreen;
            text-align: center;
            line-height: 22px;
        }
        .order_s {
            display: block;
            width: 20px;
            height: 20px;
            color: yellowgreen;
            border-radius: 50%;
            // background-color: ;
            text-align: center;
            line-height: 22px;
        }
        .count {
            color: rgb(153, 151, 151);
        }
        }

    }
}
.observe_header {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  .observe_date {
    position: absolute;
    right: 0;
    ul {
      display: flex;
      flex-direction: row;
      li {
        height: 30px;
        line-height: 30px;
        margin: 0 10px;
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>